<template>
  <div class="plant_list_detail">
    <div class="back-icon">
      <back-button />
    </div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="信息" name="first">
        <el-form
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <h2>{{ detail.chinese_name }}</h2>
          <el-form class="block" label-position="left" label-width="120px" inline>
            <el-form-item label="编号：">
              <div class="value">{{ detail.number }}</div>
            </el-form-item>
            <el-form-item label="植物名：">
              <div class="value">{{ detail.chinese_name }}</div>
            </el-form-item>
            <el-form-item label="别名：">
              <div class="value">{{ detail.alias }}</div>
            </el-form-item>
            <el-form-item label="药材名：">
              <div class="value">{{ detail.medicinal_name }}</div>
            </el-form-item>
            <el-form-item label="拉丁学名：">
              <div class="value">{{ detail.latin_name }}</div>
            </el-form-item>
            <el-form-item label="应用部位：">
              <div class="value">{{ detail.medicinal_parts }}</div>
            </el-form-item>
            <el-form-item label="军事应用：">
              <div class="value">{{ detail.types_of_military_applications }}</div>
            </el-form-item>
          </el-form>
          <div class="title">植物形态</div>
          <div class="value desc" v-html="detail.describe_info" />
          <div class="title">花期和果期</div>
          <el-form-item label="">
            <div class="value">{{ detail.flowering_and_fruiting }}</div>
          </el-form-item>
          <div class="title">生境</div>
          <el-form-item label="">
            <div class="value">{{ detail.living_environment }}</div>
          </el-form-item>
          <div class="title">地理分布</div>
          <el-form-item label="">
            <div class="value">{{ detail.geographical }}</div>
          </el-form-item>
          <div class="title">功效</div>
          <el-form-item label="">
            <div class="value">{{ detail.effect }}</div>
          </el-form-item>
          <div class="title">适应症/用法</div>
          <el-form-item label="">
            <div class="value" v-html="detail.indication_usage" />
          </el-form-item>
          <div class="title">其他</div>
          <el-form-item label="">
            <div class="value">{{ detail.other }}</div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="图片" name="second">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card class="box-card" header="手绘图">
              <el-image
                v-for="(item, index) in hand_painted_url"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="hand_painted_url"
                fit="fill"
              />
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card class="box-card" header="生境">
              <el-image
                v-for="(item, index) in living_url"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="living_url"
                fit="fill"
              />
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card class="box-card" header="全株">
              <el-image
                v-for="(item, index) in whole_plant_url"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="whole_plant_url"
                fit="fill"
              />
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card class="box-card" header="根">
              <el-image
                v-for="(item, index) in root_url"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="root_url"
                fit="fill"
              />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" header="茎">
              <el-image
                v-for="(item, index) in stem_url"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="stem_url"
                fit="fill"
              />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" header="叶">
              <el-image
                v-for="(item, index) in leaf_url"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="leaf_url"
                fit="fill"
              />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" header="花">
              <el-image
                v-for="(item, index) in flower_url"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="flower_url"
                fit="fill"
              />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" header="果实">
              <el-image
                v-for="(item, index) in fruit_url"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="fruit_url"
                fit="fill"
              />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" header="种子">
              <el-image
                v-for="(item, index) in seed_url"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="seed_url"
                fit="fill"
              />
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BackButton from '@/components/BackButton/index.vue'
import { detail } from '@/api/plantList'
export default {
  components: {
    BackButton
  },
  data() {
    return {
      activeName: 'first',
      detail: '',
      hand_painted_url: [],
      living_url: [],
      whole_plant_url: [],
      root_url: [],
      stem_url: [],
      leaf_url: [],
      flower_url: [],
      fruit_url: [],
      seed_url: []
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const res = await detail(this.$route.params.id)
      if (res.code == 200) {
        this.detail = res.data
        const arr = [
          'hand_painted_url',
          'living_url',
          'whole_plant_url',
          'root_url',
          'stem_url',
          'leaf_url',
          'flower_url',
          'fruit_url',
          'seed_url'
        ]
        arr.map(item => {
          this[item] = res.data[item] && res.data[item].includes(',') ? res.data[item].split(',') : [res.data[item]]
        })
        this.detail.describe_info = res.data.describe_info.replaceAll('。', '。<br/>').replaceAll('；', '；<br/>')
        this.detail.indication_usage = res.data.indication_usage.replaceAll('。', '。<br/>').replaceAll('；', '；<br/>')
      }
    }
  }
}
</script>

<style lang="scss">
.back-icon {
  position: absolute;
  top: -10px;
  left: -20px;
}
.plant_list_detail {
  position: relative;
  padding: 25px 60px 0;
  .el-tabs--card>.el-tabs__header .el-tabs__item{
    font-size: 16px;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    background-color: #d5edff;
  }
  .list {
    display: flex;
  }
  .name {
    width: 200px;
    text-align: right;
  }
  .block{
    background: #f8fcff;
    border-radius: 4px;
    margin: 30px 0;
    .el-form-item{
      margin-left: 5%;
      width: 30%;
      margin-bottom: 0;
    }
    .el-form-item:nth-child(2n) {
      width: 50%;
    }
  }
  .title{
    position: relative;
    padding: 0 10px;
    border-left: 5px solid #339DFF;
    margin-bottom: 40px;
    &::after{
      position: absolute;
      bottom: -15px;
      left: 0;
      right: 0;
      display: block;
      content: ' ';
      height: 2px;
      border-bottom: 1px solid #e6e6e6;
    }
  }
  .value {
    flex: 1;
  }
  .desc{
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: rgba(0,0,0,0.85);
    line-height: 27px;
    margin-bottom: 30px;
  }
  .el-col{
    margin-bottom: 20px;
  }
  .el-image{
    margin-right: 10px;
  }
  // .el-image-viewer__close{
  //   top: 10%;
  //   right: 20%;
  //   background: #fff;
  //   color: #409EFF;
  // }
  // .el-image-viewer__prev{
  //   left: 20%;
  //   background: #fff;
  //   color: #409EFF;
  // }
  // .el-image-viewer__next{
  //   right: 20%;
  //   background: #fff;
  //   color: #409EFF;
  // }
}
</style>
